<template>
  <div class="hello">
      <div class="mainCul">
        <div>
            <p>
                {{culHestory}}
            </p>
        </div>
        <div v-for="(col, index) in numbers" :key="index">
          <el-button v-for="(number, ind) in col" :key='ind' :style="number.style" :type="number.extendFiled.type" plain @click="clickButton(number)">{{number.text}}</el-button>
          <br/>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      inputNumber:'',
      culHestory:'',
      default:{
        style:''
      },
      numbers:[
      ],
      colOperation:['(',')','%'],
      rowOperation:['C','÷','×','-','+']
    }
  },
  methods:{
      clickButton(number){
        this.culHestory=this.culHestory+number.text+""
      },
      initNumber(i,j){
        let showText=3*i-3-j;
        if(showText==-1){
          showText='.'
        }else if(showText==-2){
          showText='='
        }
        let number={
            style:'width:120px;text-align: center;margin:0px;',
            text:showText+'',
            extendFiled:{}
        }
        return number
      },
      initData(){
          this.numbers=[];
          for(let i=5;i>0;i--){
            let col=[];
            for(let j=0;j<4;j++){
              let number={};
              if(i==5&&j!=3){
                number={
                  style:'width:120px;text-align: center;margin:0px;',
                  text:this.colOperation[j],
                  extendFiled:{
                    type:'danger'
                  }
                }
              }else if(j==3){
                number={
                  style:'width:120px;text-align: center;margin:0px;',
                  text:this.rowOperation[5-i],
                  extendFiled:{
                    type:'danger'
                  }
                }
              }else{
                number=this.initNumber(i,j);
              }             
              col.push(number)
            }
              this.numbers.push(col);
          }
      }
  },
  mounted(){
    this.initData();
    // CUL.Util.invokeServer({
    //     path: "/index",
    //     type: "GET",
    //     contentType: "application/json"
    //   }).then((data, textStatus, response) => {
    //     if(data){
    //       this.msg=data;
    //     }
    //   }).catch((XMLHttpRequest, textStatus, errorThrown) => {
         
    //   });
  }
}
</script>

<style scoped>
  .hello{
    margin-top: 100px;
  }
  .mainCul{
    margin: 200px;
    padding-left: 100px;
  }
</style>
